<template>
  <view class="shopping_body flex" :style="{ height: screenHeight + 'px' }">
    <view class="flex" style="margin: 30rpx 2%">
      <search style="width: 70%" />
      <view style="width: 25%; margin-left: 30rpx" class="primary_btn" @tap="addGoods"> 新增 </view>
    </view>
    <view class="shopping_content flex fl1">
      <view class="brandList">
        <view v-for="item in goodsTypeList" @tap="setType(item.id)" class="brandItem flex a-item j-center" :class="params.goodsTypeIds === item.id ? 'selectBrand' : ''" :key="item.id">{{ item.name }} </view>
      </view>
      <scroll-view class="goods_list" scroll-y="true" show-scrollbar="false" @scrolltolower="query.page++">
        <view v-for="item in dataList" @tap="setCurGoods(item)" class="goods_card">
          <goods-info-card style="width: 100%" :goods="item" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin'
import searchInput from '@/components/searchInput.vue'
import { appBasGoods, basGoodsTagList, basGoodsTypeList } from '@/service/api/common_down'

import { setImage } from '@/common/auth'
import JPopup from '@/components/jPopup.vue'
import SelectGoods from '../../components/selectGoods.vue'
import ShoppingCart from '../../components/shoppingCart.vue'
import JDialog from '@/components/jDialog.vue'
import Search from '@/components/search.vue'
import GoodsInfoCard from '../../components/goodsInfoCard.vue'

export default {
  name: 'goods_info',
  mixins: [pageMixin],
  components: {
    Search,
    ShoppingCart,
    SelectGoods,
    JPopup,
    searchInput,
    JDialog,
    GoodsInfoCard,
  },
  data() {
    return {
      keyword: '',
      brandList: [],
      curGoods: {},
      params: {
        isIgnoreGiftPromotionInfoList: 0,
        isIgnoreZeroUnGiftGoodsCount: 1,
        scope: 0,
        goodsTypeIds: '',
      },
      showPromotionList: false,
      showSelectGoods: false,
      type: 'cart',
      tagList: [],
      giftPromotionInfoList: [],
      promotionList: [],
      promotion: {},
      goodsTypeList: [],
    }
  },
  created() {
    basGoodsTagList().then(res => {
      this.tagList = res.content
    })
    this.getGoodTypeList()
  },
  mounted() {},
  onLoad() {
    this.onGet()
  },
  methods: {
    getGoodTypeList() {
      const _this = this
      _this.uniShowLoading()
      basGoodsTypeList({})
        .then(res => {
          _this.uniHideLoading()
          _this.goodsTypeList = res.content
          _this.goodsTypeList.unshift({
            id: '',
            name: '全部商品',
          })
        })
        .catch(err => {
          _this.uniHideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    searchOrderDetail(e) {},
    setPromotion(val) {
      this.promotion = val
    },
    openSelect() {
      this.showPromotionList = false
      this.showSelectGoods = true
    },
    topBack() {
      // appBack();
    },
    setCurGoods(e) {
      console.log(e)
      uni.navigateTo({
        url: `/packagePurchase/pages/goods-info/detail?goodsId=${e.id}`,
      })
    },
    addGoods() {
      uni.navigateTo({
        url: `/packagePurchase/pages/goods-info/detail?goodsId=ADD`,
      })
    },
    setType(typeId) {
      this.params.goodsTypeIds = typeId
      this.query.page = 1
    },
    setKeyword(e) {
      this.keyword = e
      this.dataList = []
      this.end = false
      this.query.page = 1
    },
    onGet() {
      const page = this.query.page
      this.params.keyword = this.keyword
      const _this = this
      _this.uniShowLoading()
      appBasGoods({ ...this.query, ...this.params })
        .then(res => {
          _this.uniHideLoading()
          this.total = res.totalElements
          const _goodsList = res.content.map(item => {
            item.image = setImage(item.imageUrl)
            return item
          })
          if (page === 1) this.dataList = []
          this.dataList = [...this.dataList, ..._goodsList]
        })
        .catch(err => {
          _this.uniHideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    back() {
      // history.back()
      uni.navigateBack({
        delta: 1,
      })
    },
  },
}
</script>
<style scoped lang="scss">
.shopping_body {
  width: 100%;
  flex-direction: column;
  background: rgb(244, 245, 249);
  font-family: PingFang SC-Regular, PingFang SC;

  .back {
    width: 50rpx;
    height: 66rpx;

    img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .shopping_title {
    background: white;
    height: 186rpx !important;
    padding-top: 88rpx;
    padding-bottom: 20rpx;

    .customerName {
      width: 85%;
      font-size: 36rpx;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
    }
  }

  .shopping_content {
    overflow-y: hidden;

    .brandList {
      height: 100%;
      overflow-y: auto;
      background: rgb(234, 238, 248);

      .brandItem {
        font-size: 26rpx;
        width: 188rpx;
        height: 106rpx;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .selectBrand {
        background: #f8f8f8;
        color: #016ef9;
      }
    }

    .goods_list {
      height: 100%;
      flex: 1;
      flex-direction: column;

      .goods_card {
        width: 522rpx;

        background: #ffffff;
        box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.03);
        border-radius: 10rpx;
        margin: 20rpx auto 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: 20rpx;

        .goods_image {
          img {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
          }
        }

        .goods_info {
          height: 100%;
          margin-left: 12rpx;

          .goods_name {
            font-weight: 500;
            color: #000000;
          }

          .goods_code {
            color: #999999;
            font-size: 26rpx;
            font-weight: 400;
          }

          .goods_type {
            min-width: 79rpx;
            height: 37rpx;
            padding: 0 5rpx;
            background: #fb2121;
            border-radius: 6rpx;
            font-size: 22rpx;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}

.promotionList {
  width: 650rpx;
  height: 600rpx;
  position: relative;
  margin-left: 50rpx;

  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
  }

  .promotionContainer {
    width: 360rpx;
    height: 500rpx;
    position: relative;
    margin: 140rpx auto 0;
    z-index: 5;
  }

  .promotion {
    padding-left: 40rpx;
    font-size: 35rpx;
    padding-top: 30rpx;
    color: #d9eaff;
  }

  .confirm {
    position: relative;
    z-index: 6;
    width: 380rpx;
    height: 100rpx;
    background: #ffb509;
    color: white;
    border-radius: 100rpx;
    font-size: 35rpx;
    margin: 60rpx 130rpx;
  }
}

.page_title {
  width: 100%;
  background: white;

  .goods_info_text {
    padding-left: 30rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .title_box {
    justify-content: space-between;
    padding: 100rpx 20rpx 20rpx;
  }

  .add-goods {
    color: RGB(97, 198, 254);
  }
}

.search_box {
  padding: 20rpx;
}
</style>
